
{% extends 'base.html' %}

    {% block content %}
    <!--菜单栏下大图部分-->
    <div class="ui vertical basic contain">
        <div class="ui banner img" style="background: url(http://or6fe9yua.bkt.clouddn.com/image/banner.jpg);background-size: cover; height:250px; text-align:center;">
            <div class="ui  header" style="padding-top:100px">
                <h1 class="ui inverted header" style="font-size:40px; color: #FF00FF">{{ cover.english }}</h1>
                <h3 class="ui inverted header" style="font-size:25px; color: #00CCCC">{{ cover.chinese }}</h3>
            </div>
        </div>
    </div>

    <!--分割线部分-->
    <div class="ui horizontal divider header" style="height:10px">
        <i class="tiny file word outline icon"></i>
        {{ article.title}}
    </div>

    <!--文章部分-->
    <div class="ui fixed basic segment" style="position:relative; margin:auto;  width: 70%; height:auto; text-align: center;">
        <div class="ui segment" style="position:relative; margin:auto; padding: 55px; width: auto; height:auto;">
            <div class="ui fixed segment" style="text-align: left; word-wrap:break-word; word-break:break-all; overflow: auto;">
                {{ article.content|safe}}
                <br>
            </div>
            <!--打赏位置，应该没人给我钱吧。-->
            <br><br>
            <div id="cyReward" role="cylabs" data-use="reward"></div>
            <script type="text/javascript" charset="utf-8" src="https://changyan.itc.cn/js/lib/jquery.js"></script>
            <script type="text/javascript" charset="utf-8" src="https://changyan.sohu.com/js/changyan.labs.https.js?appid=cysKetd9x"></script>
        </div>
    </div>

    <!--畅言评论区部分-->
    <!--PC和WAP自适应版-->
    <div class="ui fixed basic segment" style="position:relative; margin:auto; width: 70%; height:auto;">
        <!-- 表情评论的地方  -->
        <div id="cyEmoji" role="cylabs" data-use="emoji"></div>
        <script type="text/javascript" charset="utf-8" src="https://changyan.itc.cn/js/lib/jquery.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://changyan.sohu.com/js/changyan.labs.https.js?appid=cysKetd9x"></script>
        <div id="SOHUCS" sid="{{ article.id }} " >
        </div>
    </div>
        <script type="text/javascript">
        (function(){
        var appid = 'cysKetd9x';
        var conf = 'prod_ea46bf8665e1f7c9fb2dbc438493f862';
        var width = window.innerWidth || document.documentElement.clientWidth;
        if (width < 960) {
        window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } })(); </script>

    <!--文章导航部分-->
    <!--模板过滤器truncatewords对中文不起作用应使用slice-->
    <div class="ui text">
        <a href="/detail?query={{ article_pre.id }}">
            <button class="ui purple labeled icon button" style="position: relative; float: left; margin:-50px 0 50px 20px;">
                <i class="arrow left icon"></i>
                {% if article_pre %}
                    {{ article_pre.title }}
                {% else %}
                    不好意思，我到头啦。
                {% endif %}
            </button>
        </a>

        <a href="/detail?query={{ article_next.id }}">
            <button class="ui purple labeled icon button" style="position: relative; float: right; margin:-50px 20px 50px 0px;">
                {% if article_next %}
                    {{ article_next.title }}
                {% else %}
                    不好意思，我到头啦。
                {% endif %}
                <i class="arrow right icon"></i>
            </button>
        </a>
    </div>
    {% endblock %}

